<template>
	<scroll-view scroll-x :show-scrollbar="false" :scroll-into-view="autoLeft" scroll-with-animation
		:scroll-left="scrollLeft" class="scroll" @scroll="handleScroll" :class="{'active-scroll': scrollLeftNum > 6}">
		<view class="tabs" :style="{gap: gap, padding: padding}">
			<block v-for="(tab, index) in tabs" :key="tab.value">
				<view class="tab-item" :id=" `tab-${index}${random}`" :data-index="tab.index"
					:class="{'active-tab': tab.value === activeTab}" @click="changeTab(tab, index)">
					<text>{{tab.label}}</text>
					<text v-if="tab.count">({{tab.count}})</text>
				</view>
			</block>
			<view class="tab-item" style="min-width: 60rpx;"></view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "com-tabs",
		props: {
			tabs: {
				type: Array,
				default: () => []
			},
			active: {
				type: [Number, String],
				default: ''
			},
			gap: {
				type: String,
				default: '48rpx'
			},
			padding: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				autoLeft: '',
				scrollLeft: '',
				scrllTimer: null,
				random: 0,
				activeTab: 0,
				scrollLeftNum: 0,
				activeIndex: -1
			};
		},
		watch: {
			active() {
				this.activeTab = this.active && this.active !== 0 ? this.active : '';
			}
		},
		onReady() {
			this.activeTab = this.active && this.active !== 0 ? this.active : '';
			this.random = this.randomNum();
			this.setLeft();
		},
		methods: {
			handleScroll(event) {
				this.scrollLeftNum = event.detail.scrollLeft
			},
			randomNum() {
				return parseInt(Math.random() * 1000);
			},
			changeTab(tab, index) {
				this.activeIndex = index
				this.$emit('change', tab.value, tab)
				if (this.scrllTimer != null) {
					clearTimeout(this.scrllTimer);
				}
				this.scrllTimer = setTimeout(() => {
					this.setLeft();
				}, 200);
			},
			setLeft() {
				var itemWidth = Number(48) + Number(120);
				var left = Number(this.activeIndex) * itemWidth - uni.upx2px(672) - itemWidth / 2;
				var maxLeft = Number(this.tabs.length) * itemWidth - uni.upx2px(672);
				// maxLeft       = uni.upx2px(maxLeft - 30);
				left = uni.upx2px(left);

				// if(left > maxLeft){left = maxLeft + 20;}
				if (left < 0) {
					left = 0;
				}
				this.scrollLeft = left;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.active-scroll {
		position: relative;
		transition: all 0.3s ease;
		
		&:before {
			position: absolute;
			content: '';
			top: 0;
			left: -24rpx;
			bottom: 0;
			z-index: 99;
			width: 60rpx;
			background: linear-gradient(90deg, rgba(255, 255, 255, 1.0) 0%, rgba(255,255,255,0.8) 70%, rgba(0,212,255,0) 100%);
		}
	}
	
	.scroll {
		position: relative;
		
		&::after {
			position: absolute;
			content: '';
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			width: 90rpx;
			background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 70%, rgba(0,212,255,0) 100%);
		}
		
	}
	
	.tabs {
		display: flex;
		align-items: center;
		// flex-wrap: nowrap;
		// overflow-x: auto;
		// overflow-y: hidden;

		// 隐藏滚动条
		&::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			color: transparent !important;
			background-color: transparent;
		}

		.tab-item {
			position: relative;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 38rpx;
			text-align: left;
			color: #000000;
			flex-shrink: 0;
			padding: 20rpx 8rpx;
		}

		.active-tab {
			font-weight: 700;

			&::after {
				position: absolute;
				content: '';
				left: 50%;
				right: 0;
				bottom: 0;
				width: 70rpx;
				height: 8rpx;
				overflow: hidden;
				border-radius: 9999rpx;
				transform: translateX(-50%);
				// background-color: #000000;
				// background: linear-gradient(74deg, var(--primary-color) 42.24%, #FFFFFF 148.86%);
				background: var(--gradient-color-vertical);
			}
		}
	}
</style>